<template>
    <div class="personalContainer">
      <img class="bg" src="../../../../public/imgs/back1.jpg">
      <div class="user-section">
        <!-- 用户头像，名称（未登录时） -->
        <div class="user-info-box" @click="goLogin" v-if='!userInfo.avatarUrl'>
          <div class="portrait-box">
            <img class="portrait" src="../../../../public/imgs/missing-face.png">
          </div>
          <div class="info-box">
            <p class="username">未登录</p>
          </div>
        </div>
        <!-- 用户头像，名称（登录时显示） -->
        <div class="user-info-box" v-else>
          <div class="portrait-box">
            <img class="portrait" :src="userInfo.avatarUrl+'?param=180y180'">
          </div>
          <div class="info-box">
            <p class="username">{{userInfo.nickname}}</p>
          </div>
        </div>

        <div class="vip-card-box">
          <div class="b-btn">
            立即开通
          </div>
          <div class="tit">
            <!-- 会员图标-->
            <i class="iconfont icon-huiyuan-"></i>
            VIP
          </div>
          <p class="e-b">粉丝：{{userInfo.followeds}}</p>
          <p class="e-b">关注：{{userInfo.follows}}</p>
        </div>
      </div>
    </div>
</template>
<script  type='module'>
export default {
  name: 'MyHead',
  props: {
    userInfo: []
  },
  methods: {
    // 点击去登录页
    goLogin () {
      this.$router.push('/login')
    }
  }
}

</script>
<style lang="less" scoped>
  .personalContainer {
    width: 100%;
    height: 86vw;
    position: relative;
    .bg {
      // position: absolute;
      // left: 0;
      // top: 0;
      width: 100%;
      height: 100%;
      opacity: 0.6;
      filter: blur(1px);
    }
    .user-section {
      height: 260px;
      width: 100%;
      position: absolute;
      top: 0px;
      box-sizing: border-box;
      padding: 25px 15px 15px 15px;
      .user-info-box {
        height: 90px;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
        margin-bottom: 45px;
        .portrait-box {
          .portrait {
            width: 65px;
            height: 65px;
            border: 5px solid #fff;
            border-radius: 50%;
          }
        }
        .info-box {
          .username {
            font-size: 21px;
            color: #303133;
            margin-left: 10px;
          }
        }
      }
      /* vip-box */
      .vip-card-box {
        position: relative;
        display: flex;
        flex-direction: column;
        background: linear-gradient(left, red, black);
        background: rgba(0, 0, 0, 0.7);
        height: 120px;
        color: #f7d680;
        border-radius: 8px 8px 0 0;
        padding: 15px 12px;
        .b-btn {
          position: absolute;
          right: 10px;
          top: 8px;
          width: 66px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          font-size: 11px;
          color: #36343c;
          border-radius: 10px;
          background: #f9e6af;
          z-index: 1;
        }
        .tit {
          font-size: 11px;
          color: #f7d680;
          .iconfont {
            color: #f6e5a3;
            margin-right: 8px;
          }
        }
        .e-b {
          font-size: 12px;
          color: #d8cba9;
          margin-top: 8px;
        }
      }
    }
  }
</style>
